<template>
	<view>
		<cu-custom></cu-custom>
		<scroll-view :scroll-into-view="topItem" scroll-with-animation class="scroll-cont" scroll-y="true" @scroll="handleScroll" :enable-back-to-top="true" @scrolltolower="loaddata">
				<view>
					<view id="top"></view>
					<!-- <nav-custom></nav-custom> -->
					<swiper class="banner" :indicator-dots="true" :autoplay="true" indicator-active-color="#ffe32a">
						<swiper-item v-for="(item,index) in banner" :key="item.objectId" @click="handleBanner(item.link)">
							<view class="swiper-item">
								<image class="banner-img" :src="item.img"></image>
							</view>
						</swiper-item>
					</swiper>
					<!-- #ifdef MP-WEIXIN -->
					<view class="flex justify-around padding-tb u-border-bottom">
						<view 
							class="text-center" 
							v-for="(item,index) in list" 
							:key="index"
							@click="handleJump(item.target)"
						>
							<image class="home-grid" :src="item.img" mode=""></image>
							<view>{{item.title}}</view>
						</view>
					</view>
					<!-- #endif -->
					<home-title 
						title="本季推荐" 
						en-title="Seasonal Recommend"
						en-tit="Seasonal"
					></home-title>
					<scroll-view scroll-x="true" >
						<view class="scroll-inner">
							<!-- mode可设置宽高比情况，这里是保持固定高度，宽度按比调整，保持原图比例 -->
							<image src="../../static/img/recommend1.jpeg" mode="heightFix"></image>
							<image src="../../static/img/recommend2.jpg" mode="heightFix"></image>
							<image src="../../static/img/recommend3.jpg" mode="heightFix"></image>
						</view>
					</scroll-view>
					<home-title
						title="法式经典" 
						en-title="French Classics"
						en-tit="French"
					></home-title>
					<image class="classify" src="../../static/img/french.jpg" mode=""></image>
					<view class="flex flex-wrap padding-sm justify-between">
						<good-item v-for="(item,index) in glist" :key="item.objectId" :getdata="item"></good-item>
					</view>
					<view class="back-top" v-if="isShow" @click="handleBackTop">
						<text class="iconfont icon-tubiao_fanhuidingbu"></text>
					</view>
				</view>
				<view class="text-center">{{ynbotm}}</view>
			</scroll-view>
	</view>
</template>



<script>
	export default {
		data() {
			return {
				banner:[],
				glist:[],
				fpage:0,
				fend:false,
				ynbotm:"上拉显示更多。。。",
				isShow:false,
				topItem:"",
				list: [{
						img: 'https://file2105.h5project.cn/tjtx2a3xx8vzeP8CisP9pOmsnpYBUbPS/home_icon1.png',
						title: '最新活动',
						target:'/pages/cake/cake'
					},
					{
						img: 'https://file2105.h5project.cn/6GbkBdFvCe3apcl1zuSVOrnJ8sfPoAvK/home_icon2.png',
						title: '个人中心',
						target:'/pages/my/my'
					},
					{
						img: 'https://file2105.h5project.cn/iU35SRTpe19CSKDrQ4h3BvNMh2sbLpwn/home_icon3.png',
						title: '关于我们',
						target:''
					},
					{
						img: 'https://file2105.h5project.cn/3udWeh91Q1PB0QN0PR8t5rUvfr0Pz5FL/home_icon4.png',
						title: '配送范围',
						target:''
					}
				]
			}
		},
		onLoad() {
			this.$get("/1.1/classes/banner").then(res=>{
				// console.log(res.results.length);
				this.banner = res.results;
			})
			// this.loaddata();
		},
		onReachBottom() {
			console.log("触底事件");
		},
		methods: {
			loaddata(){
				// this.ynbotm = true;
				if (this.fend) {
					uni.showToast({
						title:"到底了，不能再拖了",
						icon:"none"
					});
					return;
				}
				// console.log(this.fpage);
				this.fpage++;
				let gurl = `/1.1/classes/list?where={"bcid":11}&limit=6&skip=${this.fpage*6}`;
				this.$get(gurl).then(res=>{
					// console.log(1,res);
					this.glist = [...this.glist,...res.results];
					if (res.results.length<6) {
						this.fend = true;
						this.ynbotm = "底限到了"
						return;
					}
				})
			},
			// 滚动时自动触发的事件，实时检测滚动位置，性能影响大
			// cake页有更优的回顶方法
			handleScroll(e){
				// 得到滚动位置，再计算大于500显示回顶按钮，不能通过CSS处理?
				let {scrollTop} = e.detail;
				this.isShow = scrollTop>500;
				this.topItem = '';
				// this.ynbotm = false;
				// 与上面结果一样
				/* if(scrollTop>500){
					this.isShow = true;
				}else{
					this.isShow = false;
				} */
			},
			// 改变值，使页面滚动到最上面。再次滚动时，要把值变空，不然值不变，下次点击就无效了。
			// cake页有更优的回顶方法
			handleBackTop(){
				this.topItem = "top";
			},
			handleBanner(weburl){
				uni.navigateTo({
					url:`./banner-ad?weburl=${weburl}`
				})
			},
			handleJump(url){
				if(!url){
					uni.showToast({
						title:'敬请期待',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		/* nav-custom导航时，上需要100 */
		/* padding: 100rpx 0rpx 120rpx; */
		padding: 0rpx 0rpx 120rpx;
	}
	.home-grid{
		width: 80upx;
		height: 80upx;
	}
	.banner{
		height: 1000upx;
		swiper-item{
			height: 1000upx;
		}
	}
	.banner-img{
		width: 100%;
		height: 1000upx;
	}
	.scroll-inner{
		white-space: nowrap;
		image{
			height: 290upx;
		}
	}
	.classify{
		height: 380upx;
		width: 100%;
	}
	.back-top{
		height: 100upx;
		width: 100upx;
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 0 30upx 4upx rgba(0,0,0,0.4);
		position: fixed;
		bottom: 120upx;
		right: 20upx;
		text-align: center;
		line-height: 100upx;
	}
	.icon-tubiao_fanhuidingbu{
		font-size: 40rpx;
	}
	.scroll-cont{
		// border: 1px solid red;
		height: 100vh;
	}
</style>
